<template>
  <div>
    <div class="event-header">
      <span class="eyebrow"
        >@{{ blogpost.time }} on {{ blogpost.date | date }}</span
      >
      <h1 class="title">{{ blogpost.title }}</h1>
      <el-tag>{{ blogpost.category }}</el-tag>
    </div>
    <h2>Content</h2>
    <p>{{ blogpost.description }}</p>
    <button @click="deleteBlog">delete this article</button>
  </div>
</template>

<script>
import NProgress from "nprogress";
export default {
  data() {
    return {
      blogpost: {},
    };
  },
  methods: {
    deleteBlog() {
      NProgress.start();
      this.$store
        .dispatch("blogpost/deleteBlog", this.blogpost.id)
        .then(() => {
          this.$router.push({ name: "blog-list" });
        })
        .catch(() => {
          NProgress.done();
        });
    },
  },
  async created() {
    console.log(this.$route.params);
    const res = await this.$req.get("/getBlog?id=" + this.$route.params.id);
    this.blogpost = res.data.blogposts[0];
  },
};
</script>

<style scoped>
.location {
  margin-bottom: 0;
}
.location > .icon {
  margin-left: 10px;
}
.event-header > .title {
  margin: 0;
}
.list-group {
  margin: 0;
  padding: 0;
  list-style: none;
}
.list-group > .list-item {
  padding: 1em 0;
  border-bottom: solid 1px #e5e5e5;
}
</style>
